<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加路线规则</title>

    <!--判断是否登陆-->
    <script type="text/javascript" src="../../vendor/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="../../js/config.js"></script>
    <script type="text/javascript" src="../../js/jquerySession.js"></script>
    <script type="text/javascript">
        if ($.session.get('token') == null) {
            alert("用户未登录！");
            window.location.href = "../../login.html"
        }
    </script>

</head>
<style type="text/css">
    .box {

        margin: 0px auto;
        width: 100%;

    }

    .box ul {

        margin: 0px auto;
        padding-left: 0px;
        width: 400px;

    }

    .box ul li {

        list-style-type: none;

    }

    .box ul li .point_select {

        width: 256px;
        height: 32px;
        margin-right: 10px;
        margin-bottom: 5px;

    }

    .box ul li input {

        height: 24px;
        width: 250px;

    }

    .box ul li span, input {

        margin: 5px 10px;

    }

    .box ul li {

        text-align: right;

    }

    .box ul li img {

        line-height: 19px;

    }

    .box ul .division {

        height: 10px;
        border-bottom: dashed #eeeeee 1px;
        margin-bottom: 10px;

    }

    .box ul .vote_selection {

        text-align: center;
        vertical-align: bottom;
        height: 20px;

    }

    .box ul .vote_selection .add_btn {

        line-height: 20px;
        width: 16px;
        height: 16px;
        padding-bottom: 3px;
        border: 0px;
        background: url("../../images/add.png") no-repeat;

    }

    .box ul li .del_btn {

        line-height: 20px;
        width: 16px;
        height: 16px;
        padding-bottom: 3px;
        border: 0px;
        background: url("../../images/del.png") no-repeat;

    }

</style>
<script type="text/javascript">
    $(function () {
        var matches = $(".match_select");
        $.getJSON(baseUrl + "/matches", function (json) {
            var data = json.data;
            matches.empty();
            $.each(data, function (i, match) {
                var option = "";
                if (i == 0) {
                    option += "<option value='" + match.id + "' selected='selected'>";
                    option += match.name;
                    option += "</option>";
                    matches.append(option);

                    $.getJSON(baseUrl + "/matches/" + match.id + "/routes", {
                        match_id: match.id
                    }, function (json) {
                        var data = json.data;
                        var routes = $(".route_select");
                        routes.empty();
                        $.each(data, function (i, route) {
                            var option = "";
                            if (i == 0) {
                                option += "<option value='" + route.id + "' selected='selected'>";
                                option += route.introduction;
                                option += "</option>";
                                routes.append(option);
                            } else {
                                option += "<option value='" + route.id + "'>";
                                option += route.introduction;
                                option += "</option>";
                                routes.append(option);
                            }
                        })
                    })
                } else {
                    option += "<option value='" + match.id + "'>";
                    option += match.name;
                    option += "</option>";
                    matches.append(option);
                }
            })
        });

        matches.change(function () {
            var matchId = $(".match_select option:selected").val();
            $.getJSON(baseUrl + "/matches/" + matchId + "/routes", {
                match_id: matchId
            }, function (json) {
                var data = json.data;
                var routes = $(".route_select");
                routes.empty();
                $.each(data, function (i, item) {
                    var option = "";
                    option += "<option value='" + item.id + "'>";
                    option += item.introduction;
                    option += "</option>";
                    routes.append(option);
                })
            })
        });
    })
</script>
<body>

<div class="box">

    <form>

        <ul id="voteList">
            <li><span>比赛名称</span>
                <select class="match_select" name="T_addPoint_matchName">

                </select>
            </li>
            <li><span>路线名称</span>
                <select class="route_select" name="T_addPoint_routeName" >
                </select>
            </li>
            <li class="division"></li>
            <li class="vote_selection">规则名称<span>
                <input type="text" name="routeRule" class="routeRule" value="团队人数"/>
            </span>
            </li><br/>
            <li class="vote_selection">规则详情<span>
                <input type="text" name="routeKey" class="routeKey" placeholder="格式为  0,3"/>
            </span>
            </li>

        </ul>

    </form>

</div>
</body>
</html>